import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter as Router,Route,Link } from 'react-router-dom'
import './index.css';
                    
import RouteMap from './router/route.js'
// eslint-disable-next-line 
const Basic = () => (  
    <Router>
      <div>
        <ul>
          <li><Link to="/">app</Link></li>
          <li><Link to="/page1">Page1</Link></li>
          {/* <li><Link to="/page2">Page2</Link></li> */}
        </ul>
  
        <hr/>
         <Route path="/page1" component={Page1}/>
      </div>
    </Router>
  )
  const Page1 = (match) => {
      console.log(match.match.url)
      return (
    <div>
       <h2>Page1</h2>
        <ul>
            <li>
                <Link to={`${match.match.url}/branch1`}>
                branch1
                </Link>
            </li>
            <li>
                <Link to={`${match.match.url}/branch2`}>
                branch2
                </Link>
            </li>
            <li>
                <Link to={`${match.match.url}/branch3`}>
                branch3
                </Link>
            </li>
        </ul>

        <Route path={`${match.match.url}/:branchId`} component={Branch} />
        <Router exact path={match.match.url} render={() => (
        <h3>Default Information</h3>
        )} />
    </div>
  )}
  const Branch = ({ match }) => {
    console.log(match.params);
    return (
      <div>
        <h3>{match.params.branchId}</h3>
      </div>
    )
  }
ReactDOM.render(<RouteMap />, document.getElementById('root'));

registerServiceWorker();
